<template>
  <view class="learn">
    <swiper class="head-bg">
      <swiper-item v-for="item in details.scenicIntroduces" :key="item.id">
        <image :src="item.imageUrl" mode="aspectFill"></image>
      </swiper-item>
    </swiper>
    <!-- <image class="head-bg" v-if="details.gameImg" :src="details.gameImg"></image> -->
    <view class="boxs">
      <!--  -->
      <view class="text">
        <view class="text-w">
          <view class="h1">{{ details.name || '' }}</view>
          <view class="tags">
            <view v-for="(item, index) in details.typeNames" :key="index" class="tag">{{ item }}</view>
          </view>
        </view>
        <view class="p">
          {{ details.notice || '' }}
        </view>
      </view>
      <view v-if="details.video">
        <view class="text1 text2">
          <view class="video-wrap">
            <video :src="details.video" class="video"></video>
            <!-- <view :class="'t' + index">{{['历史', '名人', '民间'][index]}}故事</view> -->
          </view>
          <!-- <view class="p">
          1925年10月，东征军进攻惠州城时，在陈炯明的反动干将、第六军军长杨坤如的指挥督战下，负隅顽抗，战斗非常激烈。
        </view> -->
        </view>
      </view>
      <!--  -->
      <view v-for="item in details.scenicTypes" :key="item.id" class="text1">
        <view class="title">{{ item.typeName }}</view>
        <view class="ps">
          <p v-html="item.text"></p>
        </view>
        <!-- <view class="ps">
          <view class="p">
            朝京门被称为“惠州天堑”, 历史上曾因拥有7座坚固城门楼而被兵家誉为东江要塞的惠州古城，由于战乱等原因于80多年前所有城门楼悉数被毁。2006年7月3日，地处东江南岸、与数百米明代古城墙相接、按照明代惠州北城门原样恢复重建的朝京门城楼重新屹立在东江边，展现在市民面前。
          </view>
          <view class="p">
            朝京门是具有挡水百年洪水功能的仿古城墙，将旱闸建设成为仿古城楼，城楼的城门内安装人字形闸门，平时闸门敞开，作为交通通道，当汛期需防洪挡水时便关闭闸门。该工程总长352米，其中城楼面积1006平方米，设有3孔拱形门洞，门洞宽分别为中孔8.1米,边孔7.2米，城楼高21.865米，工程总投资约1600万元。惠州原老城墙为明代古城墙，是惠州遗留下来的重要历史文物。历经六百多年的风雨沧桑，作为惠州大堤南堤的一部分，老城墙已不能满足防御百年一遇洪水的标准，亟待加固。朝京门城楼和城墙工程是惠州大堤南堤安全加固工程的其中一段，也是该市北门公园的重要组成部分。惠州大堤南堤安全加固工程于1998年经省发展改革委员会批准立项，并于当年开工建设,加固堤围全长22.61公里。
          </view>
        </view> -->
      </view>

    </view>
  </view>
</template>

<script>
import {
  scenicDetail
} from '@/api/challenge'

export default {
  data() {
    return {
      details: {}
    }
  },
  onLoad({
           scenicId
         }) {
    console.log(scenicId)
    if (scenicId) this.getScenicDetail(scenicId);
  },
  methods: {
    getScenicDetail(scenicId) {
      scenicDetail({
        scenicId
      }).then(res => {
        // console.log()
        this.details = res
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.learn {
  .head-bg {
    width: 100%;
    height: 350rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .boxs {
    transform: translateY(-10rpx);
    box-shadow: 0 -8rpx 0 8rpx rgba(26, 145, 113, 1);
    width: 100%;
    padding: 30rpx;
    box-sizing: border-box;
    border-radius: 20rpx 20rpx 0 0;
    background: rgba(255, 255, 255, 1);
    position: relative;
    z-index: 1;

    .text {
      box-sizing: border-box;
      width: 100%;
      padding: 30rpx 24rpx;
      border-radius: 25rpx;
      background: rgba(255, 254, 222, 1);
      box-shadow: 0px 2px 12px -3px rgba(0, 0, 0, 0.1);
      margin-bottom: 40rpx;
      font-size: 24rpx;
      line-height: 34.75rpx;
      position: relative;

      .text-w {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .tags {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
      }

      .tag {
        margin: 5rpx;
        width: 140rpx;
        height: 40rpx;
        border-radius: 10rpx;
        font-size: 24rpx;
        font-weight: 500;
        line-height: 40rpx;
        color: rgba(255, 255, 255, 1);
        text-align: center;
        // position: absolute;
        z-index: 1;
        // right: 40rpx;
        // bottom: 30rpx;
        background: rgba(0, 186, 173, 1);
      }

      .h1 {
        font-size: 36rpx;
        margin-bottom: 6rpx;
        line-height: 52rpx;
      }
    }

    .text1 {
      width: 100%;
      border-radius: 20rpx;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 2px 12px -3px rgba(0, 0, 0, 0.24);
      margin-bottom: 40rpx;

      .title {
        font-size: 36rpx;
        font-weight: 700;
        line-height: 90rpx;
        color: rgba(255, 255, 255, 1);
        text-align: center;
        width: 100%;
        height: 90rpx;
        border-radius: 20px 20px 0px 0px;
        background: rgba(43, 122, 251, 1);
      }

      .ps {
        padding: 20rpx 20rpx 40rpx;
        box-sizing: border-box;
        text-indent: 2em;
      }

      .p {
        font-size: 24rpx;
        line-height: 34.75rpx;
        color: rgba(56, 56, 56, 1);
      }
    }

    .text2 {
      padding: 20rpx 20rpx 40rpx;
      box-sizing: border-box;

      .video-wrap {
        width: 100%;
        position: relative;

        .video {
          width: 100%;
          height: 350rpx;
          object-fit: contain;
        }

        .t0,
        .t1,
        .t2 {
          width: 140rpx;
          height: 40rpx;
          border-radius: 10rpx;
          font-size: 24rpx;
          font-weight: 500;
          line-height: 40rpx;
          color: rgba(255, 255, 255, 1);
          text-align: center;
          position: absolute;
          z-index: 1;
          right: 40rpx;
          bottom: 30rpx;
        }

        .t0 {
          background: rgba(0, 186, 173, 1);

        }

        .t1 {
          background: rgba(42, 130, 228, 1);
        }

        .t2 {
          background: rgba(245, 125, 5, 1);
        }
      }
    }
  }
}
</style>
